<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$theme['title']}-选择课程</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/reset.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/style.css?v=1">
    <script src="{TEST_STATIC_PATH}new_beilai/js/screen.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/jquery.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/swiper.min.js"></script>
    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
    <style>
        .lessonFooter{
            height: 1rem;
            padding-top: 0;
            z-index: 11;
        }
        .lessonFooter a.nextStep{
            line-height: .7rem;
            margin-top: .14rem;
        background: linear-gradient(90deg, {$config['formcolorhead']} 15.44%, {$config['formcolortop']} 90.59%);
        }
    </style>
    <style>
        .wrap{
            display: flex;
        }
        .category_container {
            width: 17vw;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            padding: .14rem 0;
            background: #f7f7f7;
            position: fixed;
            top: 0;
            min-height: 100%;
        }
        .category_container span{
            line-height: .94rem;
            font-size: .24rem;
            display: inline-block;
            width: 100%;
            max-width: 1.4rem;
            min-width: 1.4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            text-align: center;
            border-bottom: 1px dashed gray;
        background: linear-gradient(90deg,{$edu_colors['lcc_c1']} -5.72%,{$edu_colors['lcc_c2']} 85.87%);
        color:{$edu_colors['lcc_tc']}
        }
        .category_container span.active {
        background: linear-gradient(90deg,{$edu_colors['lcc_c_c1']} -5.72%,{$edu_colors['lcc_c_c2']} 85.87%);
        color:{$edu_colors['lcc_c_tc']}
        }
        .category_container span.active1 {
            background: #FF600A;
        color:{$edu_colors['lcc_c_tc']}
        }

        .wrap .lessonList{
            background: #f7f7f7;
            padding: unset;
            padding-top: 0.14rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            width: 83vw;
            position: fixed;
            right: 0;
            top: 0;
            min-height: calc(100% - 1rem);
            z-index: 10;
        }
        .new_hide{
            display: none;
        }
        .lesson-item-top li {
            padding: .32rem .32rem .32rem .8rem;
            width: 4.5rem;
        }
        .lesson-item-top li::after{
            left: .12rem;
            width: .34rem;
            height: .34rem;
        }
        .lesson-item-top li.cur:after{
            left: .12rem;
            width: .34rem;
            height: .34rem;
        }
        .choseTxt{
            width: 3rem;
        }
        .service{
            background: rgba(0,0,0,0.8);
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: fixed;
            z-index:8;
        }
        .right_div{
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            padding: .32rem;
            padding-bottom: 1rem;
            width: 100%;
        }
        .category_container_p{
            position: absolute;
            color: #ffffff;
            right: .06rem;
            top: 0;
            background: #FA600A;
            height: .3rem;
            line-height: .3rem;
            width: .3rem;
            border-radius: .16rem;
            font-size: 10px;
            display: none;
        }
        .category_container_p1{
            color: #FA600A;
            background:#ffffff;
        }
        .lessonFooter span.allChose{
            margin-left: unset;
            background: unset;
            color: #FA600A;
            font-size: .48rem;
            padding-left: .3rem;
        }
        .lessonFooter p{
            margin-right: .4rem;
        }
        .brandInfor{
            padding-top: unset;
        }
        .brandInfor p{
            color: black;
        }
    </style>
</head>
<body class="grayBox">
<div class="wrap">
    <div class="category_container">
        {loop $ct_shangjia_list $key $row}
        <span class="{if $key==0}active{/if}" data-id="{$row['id']}" data-is_special="{$row['is_special']}">
            {$row['title']}
            <p class="category_container_p {if $row['is_special']==1}category_container_p1{/if}">0</p>
        </span>
        {/loop}
    </div>
    <div class="lessonList">
        <ul>
            {loop $ct_shangjia_list $kk $vv}
            <div class="right_div {if $kk!=0}new_hide{/if}" data-id="{$vv['id']}" data-special="{$vv['is_special']}" >
                {if $vv['list_info']}
                {loop $vv['list_info'] $k1 $v1}
                <div style="width: 100%">
                    <div style="font-size: 14px;font-weight:800;text-align: left;padding-left: .1rem;margin-bottom:.1rem;border-left: 3px solid {$edu_colors['lcc_c_c1']}">{$v1['title']}({php echo count($v1['courses']);})</div>
                    {if $v1['courses']}
                    {loop $v1['courses'] $key $item}
                    <div class="lesson-item">
                        <div class="lesson-item-top">
                            <li data-k="{$key}" data-courseid="{$item['id']}" data-shangjia_id="{$item['shangjia_id']}"
                                data-firid="{$v1['firid']}" data-secid="{$v1['secid']}" data-price="{$item['price']}" data-name="{$item['name']}"
                                data-shangjia_name="{$item['shangjia_name']}">
                                <div class="choseImg ">
                                    <img src="{$item['top_img']}" style="width: 60px;height: 60px">
                                </div>
                                <div class="choseTxt">
                                    <h2>{$item['name']}</h2>
                                    <h3>机构：<span style="border: 1px solid #FF600A;color: #FF600A;padding: 0 .06rem;border-radius: .07rem;">{$item['shangjia_name']}</span></h3>
                                    <p>
                                        已购：{$item['selected_num']}
                                        <span>¥<b>{$item['price']}</b></span>
                                    </p>
                                </div>
                            </li>
                        </div>
                        <div class="service" style="display: none;">
                            <div class="choseAdd">
                                <h2>请选择{$school_other_name}<span class="closeAdd"></span></h2>
                                <ul>
                                    {loop $item['address'] $address_item}
                                    <li>{$address_item}</li>
                                    {/loop}
                                </ul>
                                <div class="sureAdd">
                                    <a class="confirm">确定</a>
                                </div>
                            </div>
                        </div>


                    </div>
                    {/loop}
                    {/if}
                </div>
                {/loop}
                {/if}

            </div>
            {/loop}
        </ul>
    </div>
    <div class="lessonFooter">
        <span class="allChose" style="display: flex;flex-direction: column;height: .9rem;line-height: .9rem;align-items: center;justify-content: center;">
            <span style="height: .5rem;line-height: .5rem;flex-direction: row;font-size: .4rem">￥<span id="all_course_price">0</span></span>
            <span style="height: .3rem;line-height: .3rem;font-size: .26rem">总价值</span>
        </span>
        <a href="javascript:showSelectedCourse()" class="nextStep" style="color: {$config['formcolorcentertext']}">下一步</a>
        <p id="show_selected_course">已选<span class="num">0</span>个</p>
    </div>
</div>
<div id="screen"></div>

<!--选择校区-->
<div style="margin-top: 60px"></div>

<!--已选择课程弹出-->
<div class="bon_detail">
    <div class="schoolAlt">
        <div class="schollTitle" style="background: linear-gradient(90deg,{$edu_colors['acCho_c1']} -5.72%,{$edu_colors['acCho_c2']} 85.87%);color: #ffffff;">
            请确认选择{$course_other_name}
            <span class="closeScholl"></span>
        </div>
        <div class="lessonBar">
            <div class="brandInfor" style="border-top: none;">

            </div>
        </div>
        <div style="width: 100vw;display: flex;flex-direction: row;justify-content: center;">
            <a href="javascript:goNext()" style="line-height: .7rem;font-size: .32rem;text-align: center;width: 90vw;color:  {$config['formcolorcentertext']};
            background: linear-gradient(90deg, {$config['formcolorhead']} 15.44%, {$config['formcolortop']} 90.59%);border-radius: .96rem;margin-bottom: .14rem">确认无误</a>
        </div>

    </div>
</div>

</body>
<script>
    function getSjItemMax(data,sj_id) {
        let max_sj = 0;
        $.each(data,function (ii,val) {
            if (val.shangjia_id == sj_id){
                max_sj = val.shangjia_id;
                return max_sj;
            }
        });
        return max_sj;
    }
    function getSjItem(data,sj_id){
        let sj = {};
        $.each(data,function (ii,val) {
            if (val.shangjia_id == sj_id){
                sj = val;
                return sj;
            }
        });
        return sj;
    }
    function getctSj(data,first) {
        let max_sj = 0;
        $.each(data,function (ii,val) {
            if (val.ct_id == first){
                max_sj = val.ct_sj;
                return max_sj;
            }
        });
        return max_sj;
    }

    function getCtItem(data,first){
        let ct = {};
        $.each(data,function (ii,val) {
            if (val.ct_id == first){
                ct = val;
                return ct;
            }
        });
        return ct;
    }

    function getCategorySjNum(first)
    {
        let sj_arr =[];
        let items_input = $(".lessonList ul .lesson-item-top li.cur");
        let items_length = items_input.length;
        for (let i = 0; i<items_length;i++){
            if (items_input.eq(i).data("firid")==first){
                if (sj_arr.indexOf(items_input.eq(i).data("shangjia_id"))==-1){
                    sj_arr.push(items_input.eq(i).data("shangjia_id"))
                }
            }
        }
        return sj_arr.length;
    }
    //获取二级分类
    function getCategorySjSecNum(secid){
        let sj_arr =[];
        let items_input = $(".lessonList ul .lesson-item-top li.cur");
        let items_length = items_input.length;
        for (let i = 0; i<items_length;i++){
            if (items_input.eq(i).data("secid")==secid){
                if (sj_arr.indexOf(items_input.eq(i).data("shangjia_id"))==-1){
                    sj_arr.push(items_input.eq(i).data("shangjia_id"))
                }
            }
        }
        return sj_arr.length;
    }
    function sumCourseTotal(){
        let selected_course = $(".lessonList ul .lesson-item-top li.cur");
        let selected_course_length = selected_course.length;
        let tmp_total = 0;
        for (let k = 0; k<selected_course_length;k++){
            let item_price = $(".lessonList ul .lesson-item-top li.cur").eq(k).data("price");
            tmp_total += parseFloat(item_price);
        }
        TMP_TOTAL = tmp_total;
        $("#all_course_price").html(TMP_TOTAL);
    }
    function checkedCategorysJ(list) {
        //循环判断分类下最小选择
        let list_length = list.length;
        for (let i = 0;i<list_length;i++){
            let must_ct_sj = list[i].ct_sj;
            if (list[i].is_first==1){
                if (must_ct_sj>0){
                    let first_sj_selected_num = getCategorySjNum(list[i].ct_id);
                    let msg = list[i].ct_name+'分类需选择'+must_ct_sj+'个商家';
                    if (first_sj_selected_num<must_ct_sj){
                        layer.msg(msg);
                        return;
                    }else if (first_sj_selected_num>must_ct_sj){
                        layer.msg(msg);
                        return;
                    }
                }
            }else{
                // if (must_ct_sj>0){
                //     let second_sj_selected_num = getCategorySjSecNum(list[i].ct_id);
                //     let msg = list[i].ct_name+'分类需选择'+must_ct_sj+'个商家';
                //     if (second_sj_selected_num<must_ct_sj){
                //         layer.msg(msg);
                //         return;
                //     }else if (second_sj_selected_num>must_ct_sj){
                //         layer.msg(msg);
                //         return;
                //     }
                // }
            }
        }
    }
    //更新左侧分类下的课程选择数
    function changeCategoryCourse(firid) {
        //获取当前类下的选中状态的课程数
        let category_selected_course = $(".lessonList ul .lesson-item-top li.cur");
        let category_selected_course_length = category_selected_course.length;
        let tmp_category_selected_course = 0;
        for (let i = 0;i<category_selected_course_length;i++){
            if (category_selected_course.eq(i).data("firid")==firid){
                tmp_category_selected_course+=1;
            }
        }
        //获取左侧分类
        let tmp_category_container = $(".category_container span");
        let tmp_category_container_length = tmp_category_container.length;
        for (let j=0;j<tmp_category_container_length;j++){
            if (tmp_category_container.eq(j).data("id")==firid){
                if (tmp_category_selected_course>0){
                    $(".category_container span").eq(j).children(".category_container_p").html(tmp_category_selected_course);
                    $(".category_container span").eq(j).children(".category_container_p").show();
                }else{
                    $(".category_container span").eq(j).children(".category_container_p").hide();
                }
            }
        }
    }
    //获取已选择的课程名称
    function formatSelectedCourse(){
        let selected_course = $(".lessonList ul .lesson-item-top li.cur");
        let tmp_length = selected_course.length;
        let tmp_html = '';
        for (let i = 0;i<tmp_length;i++){
            tmp_html+= '<p>'+selected_course.eq(i).data("name")+'&nbsp;<span style="color:#FA600A; ">￥'+selected_course.eq(i).data("price")+'</span></p>'
        }
        $(".brandInfor").html(tmp_html);
    }
</script>
<script type="text/javascript">
    let course_min_num="{$course_min_num}";
    let course_max_num="{$course_max_num}";
    let show_shangjia_data= '{$show_shangjia_data}';
    let show_shangjia_category = '{$show_shangjia_category}';
    let TMP_TOTAL = 0;
    show_shangjia_data = JSON.parse(show_shangjia_data);
    show_shangjia_category = JSON.parse(show_shangjia_category);
    let shangjia_arr = new Array();
    $('.lesson-item-top li').click(function(){
        let parents_item_special = $(this).parents('.right_div').data("special");
        if($(this).hasClass('cur')){
            $(this).removeClass('cur')
        }else{
            $(this).addClass('cur');
        }
        var item_key = $(this).data("k");
        let shangjia_id=$(this).data("shangjia_id");
        let firid=$(this).data("firid");
        let secid=$(this).data("secid");


        let index=$(".lessonList ul .lesson-item-top li").index(this);
        let length=$(".lessonList ul .cur").length;
        let that = $(this);

        if (!parents_item_special){
            //判断二级类
            let sec_sj = getctSj(show_shangjia_category,secid);
            if (sec_sj>0){
                let selected_sec_sj = getCategorySjSecNum(secid);
                if (selected_sec_sj>sec_sj){
                    let tmp_msg = '当前商家分类最多选择'+sec_sj+'个商家';
                    layer.msg(tmp_msg);
                    $(this).removeClass('cur');
                    return;
                }
            }
            //常规分类
            let max_sj = getctSj(show_shangjia_category,firid);
            if (max_sj>0){
                let curt_sj_num = getCategorySjNum(firid);
                if (curt_sj_num>max_sj){
                    let tmp_msg = '当前商家分类最多选择'+max_sj+'个商家';
                    layer.msg(tmp_msg);
                    $(this).removeClass('cur');
                    return;
                }
            }
            //获取当前的商家信息
            let shangjia_item = getSjItem(show_shangjia_data,shangjia_id);
            //判断商家可选课程数
            if (shangjia_item.course_max>0){
                let tmp_shangjia_cheked_num = 0;
                for (let i=0;i<length;i++){
                    if (shangjia_id==$(".lessonList ul .lesson-item-top li.cur").eq(i).data("shangjia_id")){
                        tmp_shangjia_cheked_num+=1;
                        if(index == $(".lessonList ul .lesson-item-top li").index($(".lessonList ul .lesson-item-top li.cur").eq(i))) continue;
                        if (tmp_shangjia_cheked_num>=shangjia_item.course_max){
                            let tmp_msg = '当前商家最多选择'+shangjia_item.course_max+'个{$course_other_name}';
                            layer.msg(tmp_msg);
                            $(this).removeClass('cur');
                            return;
                        }
                    }
                }
            }

            //判断课程可选总量
            if (length>course_max_num){
                let tmp_msg = '最多选择'+course_max_num+'个{$course_other_name}';
                layer.msg(tmp_msg);
                $(this).removeClass('cur');
                return;
            }


            $('.lessonFooter .num').html($(".lessonList ul .lesson-item-top li.cur").length);

        }



        changeCategoryCourse(firid);
        sumCourseTotal();//计算选择课程的总价值
        if(!$(this).hasClass('cur')) {
            $('.choseAdd').eq(index).find('.checked').removeClass('checked');
            return;
        }
        if($('.choseAdd').eq(index).find('li').length > 1) {
            $('.choseAdd').eq(index).fadeIn();
            // $('#screen').fadeIn();
            $('.choseAdd').eq(index).parent().fadeIn();
        } else {
            $('.choseAdd').eq(index).find('li').addClass('checked');
        }
        $('.lessonFooter .num').html($(".lessonList ul .lesson-item-top li.cur").length);




    })
    //关闭弹窗
    $('.closeAdd').click(function(){
        if($('.choseAdd').eq($('.closeAdd').index($(this))).find('li.checked').length <=0) {
            $(".lessonList ul .lesson-item-top li").eq($('.closeAdd').index($(this))).removeClass('cur');
            let firid = $(".lessonList ul .lesson-item-top li").eq($('.closeAdd').index($(this))).data("firid");
            changeCategoryCourse(firid);
            sumCourseTotal();//计算选择课程的总价值
        }
        $(this).parents('.choseAdd').fadeOut();
        $(this).parents('.service').fadeOut();
        $('.lessonFooter .num').html($(".lessonList ul .lesson-item-top li.cur").length);

    })
    //查看已选择
    $("#show_selected_course").click(function () {
        let length = $(".lessonList ul .lesson-item-top li.cur").length;
        if(length < 1) {
            layer.msg(`最少选择${course_min_num}个{$course_other_name}`);
            return;
        }
        formatSelectedCourse();
        $('#screen').fadeIn();
        $(".bon_detail").children().animate({'bottom':0},500);
    });
    $('.closeScholl').click(function(){
        $('#screen').fadeOut();
        $('.schoolAlt').animate({'bottom':'-110%'},500)
    })
    $('#screen').click(function(){
        $('#screen').fadeOut();
        $('.schoolAlt').animate({'bottom':'-110%'},500)
    })
    //地区选择
    $('.choseAdd li').click(function(){
        $(this).addClass('checked').siblings().removeClass('checked')
    })
    $('.choseAdd .confirm').click(function () {
        if($('.choseAdd').eq($('.choseAdd .confirm').index($(this))).find('li.checked').length <= 0) {
            $(".lessonList ul .lesson-item-top li").eq($('.choseAdd .confirm').index($(this))).removeClass('cur');
        }
        $(this).parents('.choseAdd').fadeOut();
        $(this).parents('.service').fadeOut();
    })
    //全选
    $('.allChose').click(function(){
        // if($(this).hasClass('on')){
        //     $(this).removeClass('on')
        //     $('.lessonList li').removeClass('cur')
        // }else{
        //     $(this).addClass('on');
        //     $('.lessonList li').addClass('cur')
        // }
    })

    function showSelectedCourse() {
        let length = $(".lessonList ul .lesson-item-top li.cur").length;
        if(length < 1) {
            layer.msg(`最少选择${course_min_num}个{$course_other_name}`);
            return;
        }
        formatSelectedCourse();
        $('#screen').fadeIn();
        $(".bon_detail").children().animate({'bottom':0},500);
    }
    function goNext() {
        let length = $(".lessonList ul .lesson-item-top li.cur").length;
        if(length < course_min_num) {
            layer.msg(`最少选择${course_min_num}个{$course_other_name}`);
            return;
        }
        if(length > course_max_num) {
            layer.msg(`最多选择${course_max_num}个{$course_other_name}`);
            return;
        }
        let arr = [];
        for (let i = 0; i < length; i++) {
            let shangjia_id = $(".lessonList ul .lesson-item-top li.cur").eq(i).data('shangjia_id');
            let courseid = $(".lessonList ul .lesson-item-top li.cur").eq(i).data('courseid');
            let index = $(".lessonList ul .lesson-item-top li").index($(".lessonList ul .lesson-item-top li.cur").eq(i));
            let address = $('.choseAdd').eq(index).find('li.checked').html();
            let top_img = $('.lessonList .lesson-item .choseImg img').eq(index).attr('src');
            let name  = $('.lessonList .lesson-item .choseTxt h2').eq(index).html();
            let shangjia_name = $('.lessonList .lesson-item .choseTxt h3').eq(index).html();
            arr.push({
                shangjia_id, courseid, address, top_img, name, shangjia_name
            })
        }
        let courseStr = JSON.stringify(arr);
        localStorage.setItem('course_address', courseStr);
        let url=`/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'from'=>'mobile','r'=>'education.index.gift','joinid'=>$joinid,'recordid'=>$recordid));}`;
        window.location.href = url;
    }

    // 添加类别
    $('.category_container span').click(function () {
        let is_special = $(this).data("is_special");
        $(this).siblings('span').removeClass('active1');
        $(this).siblings('span').removeClass('active');
        if (is_special==1){
            const tmp_index = $(this).index();
            if($(this).hasClass('active1')) {
                // $(this).removeClass('active')
            }else {
                $('.right_div').siblings().addClass('new_hide');
                $('.right_div').eq(tmp_index).removeClass('new_hide')
                $(this).addClass('active1');
            }
            layer.msg('当前分类下可全选');
        }else{
            const tmp_index = $(this).index();
            if($(this).hasClass('active')) {
                // $(this).removeClass('active')
            }else {
                $('.right_div').siblings().addClass('new_hide');
                $('.right_div').eq(tmp_index).removeClass('new_hide')
                $(this).addClass('active');
            }
        }
        checkedCategorysJ(show_shangjia_category);
    })
</script>

</html>
